<template>
    <div>
         <div class="wrapper wrap">
        <a href="javascript:">
            <img class="top-img" src="https://sta.gtimg.com/mobile/static/images/top_red_13.png">
        </a>
        <div class="login-wrap">
            <div class="logo">
                <img class="logo-img" src="https://sta.gtimg.com/mobile/static/images/qd_icon.png">
            </div>
            <!-- 手机登录 -->
            <div class="phone-login-wrap hidden" id="j-phoneLoginWrap">
                <div class="login-form">
                    <ul class="form-list">
                        <li class="phone">
                            <em class="icon-phone"></em>
                            <a id="phonearea" class="area" href="javascript:">+86</a>
                            <input type="text" id="phonemobile" placeholder="请输入手机号" maxlength="11">
                        </li>
                        <li id="img-code-input" class="code hidden">
                            <input id="txtCode" type="text" placeholder="请输入右侧验证码"><img id="imgCode" class="code-img"
                                src="">
                        </li>

                        <li id="img-code-input" class="code" style="display:none">
                            <svg class="icon icon-user">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-code"></use>
                            </svg>
                            <input type="text" placeholder="请输入右侧验证码"><a href="javascript:"><img id="captcha" src=""
                                    alt="验证码"><svg class="icon icon-reload stat" data-stat="03|手机_验证码换一张|mqd_L03|2">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-reload"></use>
                                </svg></a>
                        </li>


                        <li class="code cf">
                            <a class="btn-primary fr disabled" id="sendPhoneMsg" href="javascript:">点击获取验证码</a><input
                                type="text" id="phonecode" placeholder="请输入短信验证码" maxlength="6">
                        </li>
                    </ul>
                    <p class="tip">
                    </p>
                </div>
                <div class="btn-wrap">
                    <a class="btn-primary large phoneBtnLogin disabled" href="javascript:" @click="goindex()">登录</a>
                </div>
            </div>
            <!-- 账号登录 -->
            <div class="account-login-wrap " id="j-accountLoginWrap">
                <div class="login-form">
                    <ul class="form-list">
                        <li>
                            <em><svg t="1626791083273" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="2143" width="16" height="16">
                                    <path
                                        d="M843.544 867.623v0c0-118.563-62.823-222.167-157.298-279.796l-0.158-0.158c-0.945-0.63-1.89-1.26-2.834-1.731-11.022-5.038-23.934-0.158-28.972 10.864-3.62 7.871-2.677 17.319 2.991 22.831 0.158 0.158 0.314 0.158 0.314 0.314 81.875 55.108 142.025 141.866 142.025 247.519v0c0 0.158 0 0.314 0 0.473 0 12.123 9.762 21.886 21.886 21.886s21.886-9.762 21.886-21.886c0.158 0 0.158-0.158 0.158-0.314z"
                                        p-id="2144" fill="#8a8a8a"></path>
                                    <path
                                        d="M668.299 524.531c2.046-1.731 3.937-3.463 5.984-5.354 2.519-2.362 5.038-4.881 7.402-7.557 2.046-2.205 4.094-4.409 6.141-6.771 2.046-2.362 4.252-4.723 6.298-7.243 3.62-4.409 6.929-8.975 10.235-13.698 1.573-2.205 2.991-4.566 4.409-6.929 2.046-3.307 4.094-6.612 6.141-10.077 1.26-2.362 2.677-4.566 3.779-6.929 2.519-4.881 4.881-9.762 7.085-14.8 0.63-1.573 1.418-3.15 2.046-4.723 2.205-5.196 4.094-10.548 5.825-16.060 0.63-2.046 1.26-4.094 1.89-6.141 1.418-4.881 2.677-9.92 3.779-14.958 0.314-1.731 0.787-3.307 1.103-5.038 1.26-6.612 2.362-13.227 2.991-19.997 0.158-1.573 0.314-3.15 0.314-4.723 0.473-5.511 0.787-11.022 0.787-16.691 0-1.103 0.158-2.205 0.158-3.463 0-0.945-0.158-1.731-0.158-2.677 0-1.418 0-2.834 0-4.409-0.158-2.991-0.473-5.984-0.63-8.817-0.314-3.463-0.473-7.085-0.787-10.548-0.473-3.463-0.945-6.771-1.573-10.077-0.63-4.252-1.418-8.502-2.205-12.754-0.314-1.573-0.787-2.991-1.103-4.409-16.532-68.965-63.927-125.648-127.066-154.778 0 0 0 0-0.158 0-5.511-2.519-11.18-4.881-16.847-6.929-1.573-0.63-3.15-1.26-4.723-1.731-4.566-1.573-9.133-2.991-13.856-4.252-2.834-0.787-5.825-1.573-8.817-2.205-3.779-0.945-7.557-1.573-11.493-2.362-3.779-0.63-7.557-1.26-11.493-1.731-3.463-0.473-6.929-0.787-10.393-1.103-1.89-0.158-3.62-0.473-5.511-0.63-4.252-0.314-8.66-0.314-12.912-0.314-0.158 0-0.158 0-0.314 0-0.158 0-0.473 0-0.63 0-7.715 0-15.274 0.314-22.675 1.103 0 0-0.158 0-0.158 0-7.402 0.787-14.8 1.89-22.044 3.307-0.314 0-0.63 0.158-1.103 0.158-6.929 1.418-13.856 3.307-20.626 5.354-0.473 0.158-1.103 0.314-1.573 0.473-6.612 2.046-12.912 4.409-19.21 7.085-0.63 0.314-1.418 0.473-2.046 0.787-6.141 2.677-12.123 5.511-17.95 8.66-0.787 0.314-1.418 0.787-2.205 1.103-5.825 3.15-11.337 6.612-16.847 10.235-0.787 0.473-1.573 0.945-2.205 1.573-5.354 3.62-10.548 7.557-15.587 11.652-0.787 0.63-1.418 1.26-2.205 1.731-4.881 4.094-9.605 8.502-14.171 12.912-0.63 0.63-1.418 1.418-2.046 2.046-4.566 4.566-8.817 9.289-12.912 14.171-0.63 0.787-1.26 1.573-1.89 2.205-4.094 5.038-7.871 10.077-11.493 15.431-0.473 0.787-1.103 1.573-1.573 2.362-3.62 5.354-6.929 10.864-10.077 16.691-0.473 0.787-0.787 1.573-1.26 2.362-3.15 5.825-5.984 11.652-8.502 17.791-0.314 0.787-0.63 1.573-0.945 2.362-2.519 6.141-4.881 12.439-6.929 19.052-0.158 0.63-0.314 1.418-0.63 2.046-2.046 6.612-3.779 13.383-5.196 20.155-0.158 0.473-0.158 1.103-0.314 1.573-1.418 7.085-2.519 14.171-3.307 21.414 0 0.314 0 0.63 0 0.945-0.787 7.557-1.103 15.115-1.103 22.831 0 7.085 0.473 14.014 1.103 20.941 0.158 1.89 0.314 3.779 0.63 5.668 0.63 5.668 1.573 11.18 2.519 16.847 0.314 1.26 0.473 2.519 0.63 3.937 1.418 6.455 2.991 12.754 4.881 19.052 0.63 1.89 1.26 3.779 1.89 5.668 1.573 4.566 3.15 9.133 5.038 13.54 0.787 1.89 1.573 3.937 2.362 5.825 2.519 5.668 5.038 11.18 8.031 16.532 1.103 2.046 2.362 3.937 3.463 5.984 2.046 3.62 4.094 7.085 6.455 10.548 1.573 2.362 3.15 4.723 4.723 7.085 2.362 3.307 4.881 6.612 7.402 9.92 2.677 3.463 5.511 6.929 8.502 10.235 2.205 2.519 4.409 5.038 6.771 7.402 2.362 2.519 4.881 4.881 7.243 7.243 2.046 1.89 4.094 3.779 6.141 5.511 4.723 4.252 9.762 8.189 14.8 12.123 1.89 1.418 3.62 2.834 5.511 4.094 3.15 2.205 6.298 4.252 9.605 6.298 2.046 1.26 3.937 2.519 5.984 3.62 3.307 2.046 6.771 3.937 10.235 5.825v0c-129.111 44.086-222.010 166.43-222.010 310.657v0c0 0.158 0 0.314 0 0.473 0 12.123 9.762 21.886 21.886 21.886s21.886-9.762 21.886-21.886c0-0.158 0-0.314 0-0.473v0c0-157.138 127.38-284.519 284.519-284.519 38.261 0 74.318-9.449 106.124-26.139v0 0c3.62-1.89 7.085-3.937 10.548-5.984 1.89-1.103 3.937-2.362 5.825-3.463 3.307-2.046 6.612-4.252 9.762-6.455 1.89-1.26 3.62-2.677 5.354-3.937 5.196-4.252 10.393-8.345 15.274-12.754zM619.331 507.682c-29.76 19.997-65.501 31.806-103.921 31.806-38.576 0-74.318-11.652-103.921-31.806-39.521-26.766-68.335-68.335-78.255-116.674-2.519-12.123-3.779-24.72-3.779-37.475 0-102.66 83.292-185.954 185.954-185.954s185.954 83.292 185.954 185.954c0 12.912-1.26 25.348-3.779 37.475-9.92 48.337-38.735 89.907-78.255 116.674z"
                                        p-id="2145" fill="#8a8a8a"></path>
                                </svg></em>
                            <input type="text" id="username" placeholder="请输入邮箱/个性账号" v-model="username">
                        </li>
                        <li>
                            <div class="eye-icon fr" id="j-isLook" @click="changelook"><i class="unlook" >
                                    <svg v-if="!islook" t="1626791551612" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="3958" width="16" height="16">
                                        <path
                                            d="M576.58 494.83l49.96 47.81c2.38-9.82 3.99-19.9 3.99-30.42 0-71.45-58.13-129.57-129.57-129.57-12.49 0-24.31 2.33-35.76 5.65l49.76 47.6c30.49 5.57 54.7 28.92 61.62 58.93zM536.8 636.12l-49.7-47.58c-30.6-5.55-54.94-28.95-61.81-59.08l-49.91-47.73c-2.38 9.85-3.99 19.95-3.99 30.5 0 71.45 58.13 129.57 129.57 129.57 12.52-0.01 24.36-2.37 35.84-5.68zM231.24 208.43c-10.37-9.87-26.77-9.51-36.64 0.83-9.9 10.34-9.54 26.74 0.8 36.64l596.03 570.12a25.808 25.808 0 0 0 17.91 7.18c6.84 0 13.63-2.7 18.74-8.01 9.9-10.34 9.51-26.74-0.8-36.64L231.24 208.43z"
                                            p-id="3959" fill="#bfbfbf"></path>
                                        <path
                                            d="M511.36 744.74c-137.09 0-271.56-91.97-335.98-229.94-0.13-0.49-0.29-0.93-0.44-1.4-0.05-0.44-0.18-0.8-0.23-1.06-0.03-0.29-0.23-0.65-0.23-1.01v-0.34c0-0.6 0.36-1.19 0.44-1.79 0.1-0.36 0.29-0.67 0.39-1.04 24.07-51.93 58.31-97.39 98.91-133.87l-37.5-35.84c-44.94 41.02-82.67 91.63-109.02 149.21-0.86 1.71-1.45 3.32-1.84 4.77-0.19 0.42-0.37 0.86-0.52 1.3-1.43 4.09-1.43 6.87-1.32 6.25-0.65 3.03-1.3 9.07-1.3 9.07-0.18 1.81-0.16 3.27 0.05 5.08 0 0 0.57 10.91 0.86 12l3.68 11.04C199.09 694 353.43 797.99 511.36 797.99c56.55 0 112.55-14.41 164.48-38.82l-40.37-39.34c-39.79 16.1-81.82 24.91-124.11 24.91z m388.71-233.15c0-4.69-0.8-8.58-1.04-9.02-0.16-2.36-0.93-6.56-1.68-8.76-0.21-0.54-0.44-1.11-0.67-1.68-0.39-1.27-0.83-2.51-1.3-3.5-71.7-156.83-226.02-262.18-384.02-262.18-56.49 0-112.47 13.66-164.4 38.12l40.37 38.59c39.78-16.07 81.76-24.88 124.03-24.88 137.48 0 272.26 92.36 335.88 229.73 0.08 0.26 0.13 0.49 0.21 0.65 0.05 0.23 0.13 0.49 0.21 0.7 0.13 1.04 0.26 2.02 0.39 2.57-0.13 0.54-0.21 1.04-0.31 1.58-0.03 0.13-0.08 0.26-0.1 0.39-0.1 0.34-0.23 0.7-0.34 1.11-24.05 51.83-58.2 97.2-98.76 133.67l37.52 35.89c44.81-40.89 82.38-91.24 108.53-148.49 1.11-2.02 1.81-3.91 2.31-5.6 0.21-0.49 0.39-0.96 0.54-1.43 1.24-3.63 1.5-6.76 1.4-6.76 0 0 0 0.03-0.03 0.03 0.48-2.49 1.26-6.22 1.26-10.73z"
                                            p-id="3960" fill="#bfbfbf"></path>
                                    </svg>
                                    <svg v-if="islook" t="1628694716255" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2058" width="16" height="16"><path d="M928.842 512.091c0-5.006-0.846-9.193-1.087-9.692-0.182-2.48-1.028-7.001-1.815-9.374-0.21-0.59-0.484-1.21-0.724-1.8-0.425-1.361-0.877-2.691-1.391-3.75-76.872-168.137-242.376-281.144-411.783-281.144-169.375 0-334.865 112.903-411.388 280.13-0.922 1.816-1.573 3.554-1.981 5.067-0.181 0.498-0.393 0.967-0.559 1.406-1.512 4.43-1.542 7.514-1.421 6.713-0.71 3.25-1.361 9.722-1.361 9.722-0.181 1.95-0.181 3.507 0.03 5.443 0 0 0.65 5.655 0.968 6.803 0.09 1.602 0.483 3.932 0.952 6.049h-0.03a27.825 27.825 0 0 0 1.738 5.291c0.394 1.33 0.863 2.57 1.271 3.508 76.976 168.166 242.437 281.204 411.781 281.204 169.437 0 334.942-112.946 410.937-279.33a30.065 30.065 0 0 0 2.448-6.017c0.242-0.544 0.455-1.028 0.605-1.512 1.332-3.872 1.603-7.227 1.482-7.227l-0.029 0.03c0.543-2.69 1.357-6.711 1.357-11.52z m-56.124 2.056c-0.03 0.122-0.091 0.272-0.151 0.394-0.09 0.362-0.24 0.786-0.333 1.21-68.404 147.42-212.83 246.337-360.192 246.337-146.997 0-291.168-98.643-360.252-246.58-0.167-0.513-0.288-0.998-0.47-1.48-0.03-0.485-0.12-0.878-0.15-1.151-0.06-0.3-0.12-0.725-0.166-1.089v-0.377c0.166-0.62 0.286-1.24 0.348-1.92 0.12-0.362 0.211-0.71 0.348-1.103 68.432-147.498 212.98-246.46 360.341-246.46 147.421 0 291.94 99.052 360.162 246.323 0.06 0.287 0.122 0.53 0.213 0.726 0.06 0.242 0.12 0.484 0.24 0.741 0.152 1.104 0.273 2.193 0.424 2.736-0.18 0.574-0.27 1.119-0.362 1.693zM512.041 373.06c-76.598 0-138.954 62.325-138.954 138.939 0 76.599 62.356 138.955 138.954 138.955 76.599 0 138.955-62.356 138.955-138.955 0-76.614-62.356-138.94-138.955-138.94z m0 222.312c-45.935 0-83.371-37.407-83.371-83.372 0-45.95 37.436-83.356 83.371-83.356 45.965 0 83.374 37.407 83.374 83.356 0 45.965-37.409 83.372-83.374 83.372z" p-id="2059"></path></svg>
                                </i></div>
                            <em class="icon-lock">
                                <svg t="1626791616582" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="4946" width="16" height="16">
                                    <path
                                        d="M120.393143 449.609143A36.425143 36.425143 0 0 0 109.714286 475.428571v438.857143a36.571429 36.571429 0 0 0 36.571428 36.571429h731.428572a36.571429 36.571429 0 0 0 36.571428-36.571429v-438.857143a36.498286 36.498286 0 0 0-36.571428-36.571428h-731.428572a36.425143 36.425143 0 0 0-25.892571 10.752zM987.428571 950.857143a73.142857 73.142857 0 0 1-73.142857 73.142857H109.714286a73.142857 73.142857 0 0 1-73.142857-73.142857V438.857143a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142857v-36.571429a329.142857 329.142857 0 0 1 658.285714 0V365.714286h73.142857a73.142857 73.142857 0 0 1 73.142857 73.142857v512zM765.44 292.571429A256 256 0 0 0 256 329.142857a36.571429 36.571429 0 0 0 36.571429 36.571429h438.857142a36.571429 36.571429 0 0 0 36.571429-36.571429c0-12.434286-0.877714-24.649143-2.56-36.571428zM548.571429 621.714286v146.285714a36.571429 36.571429 0 0 1-73.142858 0v-146.285714a36.571429 36.571429 0 0 1 73.142858 0z"
                                        fill="#bfbfbf" p-id="4947"></path>
                                </svg>                                
                            </em>
                            <input v-if="!islook" id="password" type="password" placeholder="请输入密码" v-model="password">
                            <input v-if="islook" id="password" type="text" placeholder="请输入密码" v-model="password">
                        </li>
                    </ul>
                </div>
                <div class="reg-wrap cf">
                    <a class="link" href="https://aq.yuewen.com/welcome/validateuser">忘记密码</a>
                    <div class="fr">
                        <!-- <a class="link">用户注册</a> -->
                        <router-link to="/register" tag="a">用户注册</router-link>
                    </div>
                </div>
                <div class="btn-wrap">
                    <a class="btn-primary large login-button disabled" href="javascript:" @click="goindex()">登录</a>
                </div>
            </div>
            <!-- 更多登录 -->
            <div class="login-btn-wrap">
                <ul>
                    <li>
                        <a
                            href="https://ptlogin.yuewen.com/login/qqconnectlogin?appid=13&amp;areaid=1&amp;target=top&amp;ticket=0&amp;auto=1&amp;autotime=30&amp;ajaxdm=yuewen&amp;header=1&amp;returnUrl=https%3A%2F%2Fm.qidian.com%2Fuser%3Ffrom%3Dlogin&amp;jumpdm=yuewen">
                            <p class="login-icon qq-icon"></p>
                            <span>QQ</span>
                        </a>
                    </li>
                    <li id="j-passportLogin" class="hidden">
                        <a href="javascript:">
                            <p class="login-icon passport-icon"></p>
                            <span>阅文通行证</span>
                        </a>
                    </li>
                    <li id="j-smsLogin">
                        <a href="javascript:">
                            <p class="login-icon sms-icon"></p>
                            <span>短信登录</span>
                        </a>
                    </li>
                    <li id="j-moreLogin">
                        <a href="javascript:">
                            <p class="login-icon more-icon" id="otherLogin"></p>
                            <span>更多</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <van-dialog id="van-dialog" />
    </div>
</template>
<script>
import 'vant/lib/index.css'
import "../assets/css/4.css"
// import Dialog from 'vant/lib/dialog/Dialog';
import { Dialog } from 'vant';
export default {
    data() {
        return {
            username:"",
            password:"",
            islook:false
        }
    },
    methods: {
        changelook(){
            this.islook = !this.islook;
        },
        back(){
                this.$router.go(-1);
            },
            goindex(){
                if(this.username && this.password){
                    window.sessionStorage.setItem("login",true);
                    // window.localstorage.setItem("login",true);
                    this.$router.push("/index");
                }
                else{
                    Dialog.alert({
                    message: '请输入账号或密码',
                    theme: 'round-button',
                    }).then(() => {
                    // on close
                    });
                }
            }
    },
}
</script>
<style lang="less">

</style>